<template>
  <el-card class="product-card" :body-style="{ padding: '0px' }">
    <div class="image-container">
      <el-image 
        :src="product.productMainImg" 
        :alt="product.productName"
        fit="cover"
        class="product-image"
      />
      <div v-if="showStatus" class="status-badge" :class="statusClass">
        {{ statusText }}
      </div>
    </div>
    <div class="product-info">
      <div class="product-name">{{ product.productName }}</div>
      <div class="product-meta">
        <span class="product-brand">{{ product.productBrand }}</span>
        <span class="product-type">{{ product.productType }}</span>
      </div>
      <div class="product-price">¥{{ product.productPrice }}</div>
      <div class="product-stock">库存: {{ product.productCount }}</div>
      <div class="product-actions">
        <el-button 
          v-if="showApprove && product.productStatus === 0" 
          type="success" 
          size="small"
          @click="approveProduct(product.id)"
        >
          通过审核
        </el-button>
        <el-button 
          v-if="showDelete" 
          type="danger" 
          size="small"
          @click="deleteProduct(product.id)"
        >
          删除
        </el-button>
        <el-button 
          type="primary" 
          size="small"
          @click="viewDetails(product.id)"
        >
          详情
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { productcheckAPI } from '@/http'

interface Product {
  id: number
  productName: string
  productBrand: string
  productType: string
  productPrice: number
  productMainImg: string
  productCount: number
  productStatus: number
  // 其他属性...
}

const props = defineProps({
  product: {
    type: Object as () => Product,
    required: true
  },
  showStatus: {
    type: Boolean,
    default: true
  },
  showApprove: {
    type: Boolean,
    default: false
  },
  showDelete: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['product-deleted', 'product-approved'])

const statusText = computed(() => {
  switch (props.product.productStatus) {
    case 0: return '待审核'
    case 1: return '已通过'
    case 2: return '未通过'
    default: return '未知'
  }
})

const statusClass = computed(() => {
  switch (props.product.productStatus) {
    case 0: return 'pending'
    case 1: return 'approved'
    case 2: return 'rejected'
    default: return ''
  }
})

const viewDetails = (id: number) => {
  // 查看商品详情逻辑
  console.log('查看商品详情:', id)
}

const deleteProduct = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要删除这个商品吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await productcheckAPI.deleteProduct(id)
    ElMessage.success('商品删除成功')
    emit('product-deleted', id)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除商品失败')
    }
  }
}

const approveProduct = async (id: number) => {
  try {
    await productcheckAPI.checkProduct(id)
    ElMessage.success('商品审核通过')
    emit('product-approved', id)
  } catch (error) {
    ElMessage.error('审核操作失败')
  }
}
</script>

<style scoped>
.product-card {
  width: 280px;
  margin: 10px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.status-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.status-badge.pending {
  background-color: #e6a23c;
}

.status-badge.approved {
  background-color: #67c23a;
}

.status-badge.rejected {
  background-color: #f56c6c;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.product-price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
  margin: 8px 0;
}

.product-stock {
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
}

.product-actions {
  display: flex;
  justify-content: space-between;
}
</style>